sdk/samples/all in on code/Visual Studio 2010/CSASPNETSerializeJsonString/readme.txt

   1 ========================================================================
   2   ASP.NET APPLICATION :  CSASPNETSerializeJsonString Project Overview
   3 ========================================================================
   4
   5 /////////////////////////////////////////////////////////////////////////////
   6 Use:
   7
   8   This project illustrates how to serialize Json string. we use jQuery at client
   9 side and manipulate XML data at server side.
  10
  11   It demonstrates how to use the serializable json data through an autocomplete
  12 example.
  13
  14
  15 /////////////////////////////////////////////////////////////////////////////
  16 Demo the Sample.
  17
  18 Open the CSASPNETSerializeJsonString.sln directly, expand the web application
  19 node and press F5 to test the application.
  20
  21 Step 1.  View default.aspx in browser
  22
  23 Step 2.  By default, we could see a search input textbox at the top of the page,
  24          you can enter a character, for example "m", you will see an autocomplete
  25          list under that input, move mouse to select one book name, then you'll
  26          find this book's related information was display in the result area.
  27
  28
  29 /////////////////////////////////////////////////////////////////////////////
  30 Code Logical:
  31
  32 Step 1.  Create a C# ASP.NET Empty Web Application in Visual Studio 2010.
  33
  34 Step 2.  Add a C# class file which named 'Book' in Visual Studio 2010, declare
  35          the class members: id,lable,value,author,genre,price,publish_date,description.
  36          this class is used to store the book's information
  37
  38 Step 3.  Add a C# ashx file which named 'AutoComplete' in Visual Studio 2010.
  39          write code in method 'ProcessRequest', the logic as below:
  40
  41          1, load a flat XML dataset and filter dataset records
  42          2, assign corresponding fields to the class Book' members
  43          3, initializes a new instance of the 'Collection<Book>' class, add
  44             new elements into 'Collection<Book>'
  45          4, serialize the object 'Collection<Book>'
  46
  47
  48 Step 4.  Create a new directory, "Scripts". Right-click the directory and click
  49          Add -> New Item -> JScript File. We need to reference jquery javascript
  50          library files to support AutoComplete effect.
  51          files in this sample: jquery.min.js,jquery-ui.min.js
  52
  53
  54 Step 5.  Create a new directory, "Styles". Right-click the directory and click
  55          Add -> New Item -> Style Sheet File. reference jquery UI style files called
  56          jquery-ui.css. To make the sample looks better, there refers one other UI
  57          markups called site.css.
  58
  59
  60 Step 6.  Open the Default.aspx,(If there is no Default.aspx, create one.)
  61          In the Head block, add javascript and style references like below.
  62          [CODE]
  63          <link rel="stylesheet" href="Styles/jquery-ui.css" type="text/css" media="all" />
  64          <link rel="stylesheet" href="Styles/site.css" type="text/css" />
  65          <script type="text/javascript" src="Scripts/jquery.min.js"></script>
  66          <script type="text/javascript" src="Scripts/jquery-ui.min.js"></script>
  67          [/CODE]
  68
  69          write the autocomplete javascript as below.
  70          [CODE]
  71          <script type="text/javascript">
  72          $(function () {
  73             $('#<%= tbBookName.ClientID %>').autocomplete({
  74                 source: "AutoComplete.ashx",
  75                 select: function (event, ui) {
  76
  77                     $(".author").text(ui.item.Author);
  78                     $(".genre").text(ui.item.Genre);
  79                     $(".price").text(ui.item.Price);
  80                     $(".publish_date").text(ui.item.Publish_date);
  81                     $(".description").text(ui.item.Description);
  82                 }
  83             });
  84          });
  85          </script>
  86          [CODE]
  87
  88          For more details, please refer to the Default.aspx in this sample.
  89
  90 Step 7.  Everything is ready, test the application and hope you can succeed.
  91
  92
  93 /////////////////////////////////////////////////////////////////////////////
  94 References:
  95
  96 http://msdn.microsoft.com/en-us/library/system.web.script.serialization.javascriptserializer.aspx